<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="java.util.Iterator"%>
<%@page import="net.groupme.model.ObjectFactory"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/mymetaheader.jsp" %>
	
	<!--  Ajax-Includes -->
    <script type='text/javascript' src='/GroupMe/dwr/interface/DWRUserManager.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/engine.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/util.js'></script>
    <!-- <script type='text/javascript' src='./scriptaculous/prototype.js'></script> -->
	
	<!-- Prototype-Include -->
	<script src="<%= request.getContextPath()%>/scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="<%= request.getContextPath()%>/scriptaculous/scriptaculous.js" type="text/javascript"></script>
	
	<title>Welcome to GroupMe! - The Social Semantic Web</title>
	
	<!-- setting initial tag-cloud height -->
	<script type="text/javascript"><!--
	/*This funtion sets the height of the tag-cloud to the (almost) same size as the group-list*/
		function setTagCloudSize(){
			var groupListHeight = $('main_home').getHeight();
			var userListHeight = $('latestUsers').getHeight();
			var tagCloudHeightSize = groupListHeight - userListHeight;
			var tagCloudHeight = tagCloudHeightSize + "px";
			$('tagCloud_content').setStyle({
				height: tagCloudHeight,
			});
		}
		
		
		function showCompleteTagCloud(){
			DWRSearchManager.getCompleteTagCloud(showCompleteTagCloudCallback);
			$('main_home_content').hide();
			$('user_groups').setStyle({paddingBottom: '9px'});
			$('completeTagcloud_content').show();
			$('completeTagcloud_content').innerHTML += "<img src=\"<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>\"/> " +
					"<small><i>Computing the tag cloud.</i></small>";
		}
		
		/**
		 * Visualize the complete groupme tag cloud.
		 */
		 function showCompleteTagCloudCallback(tagCloud){
		 	if(tagCloud == null || tagCloud.html == ""){
		 		$('completeTagcloud_content').innerHTML = "<i>Sorry, there is a problem with computing the tag cloud. Try it again</i>";
		 	}else{
		 		$('completeTagcloud_content').innerHTML = tagCloud.html;
		 		$('completeTagcloud_content').show();
				}
			}
	//-->					
	</script>
</head>
<body onload="">
	<!-- title image, logo:  -->
	<div id="groupme_header">
		<%@ include file="./jsp-includes/groupme_header.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/groupme_menu.jsp" %>
	</div>
	<!-- content and sidebar -->
	<!-- Content: -->
	<div id="mycontent">
		<div id="welcome" style="text-align: center;  margin-bottom: 1em; color: #ccc;  font-size: small;">
				<span><a style="color:red" href="http://www.youtube.com/watch?v=Vf_IfjR4Zkc"><strong>New GroupMe! video!</strong></a></span> 
		</div>
		<div id="main_home">
			<div class="ro_bw">
				<div class="lo_bw">
					<div class="ru_bw">
						<div class="lu_bw">
							<div id="user_groups">
								<div class="content_header" style="color: #006699; font-size: small; padding-top: 2px;">
										[<a href="<%= VIEW_VOCABULARY.RESTful_LATEST_GROUPS_URI_PATTERN %>">latest groups</a>] 
										[<a href="<%= VIEW_VOCABULARY.RESTful_POPULAR_GROUPS_URI_PATTERN %>">popular groups</a>] 
										[<a href="<%= VIEW_VOCABULARY.RESTful_RANDOM_GROUPS_URI_PATTERN %>">random groups</a>]  
								</div>
									
								<div id="main_home_content">
									<%@ include file="./jsp-includes/groupme_home_main.jsp" %>
								</div>
								<div id="completeTagcloud_content" style="display:none; padding:5px; border-right: 1px solid #066a9b; border-left: 1px solid #066a9b;">
								
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="sidebar_right">
			<div id="latestUsers">
				<div class="ro_bw">
					<div class="lo_bw">
						<div class="ru_bw">
							<div class="lu_bw">
								<div id="user_tagCloud" style="color: #006699; font-size: small; padding-top: 2px;">
								    <div class="content_header">
										GroupMe! users
									</div>
									<div id="latestUsers_content">
										<%@ include file="./jsp-includes/sidebarUsers.jsp" %>
									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
			<div id="tagCloud">
				<div class="ro_bw">
					<div class="lo_bw">
						<div class="ru_bw">
							<div class="lu_bw">
							<div id="user_tagCloud" style="color: #006699; font-size: small; padding-top: 2px;">
							 <%@ include file="./jsp-includes/sidebarTagCloud.jsp" %>
									<div class="content_header">
										latest tags [<a href="javascript:showCompleteTagCloud();">show all tags</a>]
									</div>
									<div id="tagCloud_content" class="generalContent">
									<span id="tagCloudLoadingMessage">
										<img src="<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>" alt="loading"/> 
										<small><i>refreshing tag cloud</i></small>
									</span>
									</div>
								</div> 
								
							
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<%@ include file="./jsp-includes/footer.jsp" %>
	</div>
</body>
</html>